<template>
	<view class="ruzu-info-container">
		<!-- 基础信息表单 -->
		<view class="form-section">
			<view class="section-title">
				<text class="title-text">基础信息</text>
			</view>
			
			<view class="form-content">
				<!-- 公司名称 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text class="label-text">公司名称</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.companyName" 
						placeholder="请输入内容"
						@blur="validateCompanyName"
					/>
					<text class="error-text" v-if="errors.companyName">{{ errors.companyName }}</text>
				</view>

				<!-- 公司所在地 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text class="label-text">公司所在地</text>
					</view>
					<view class="location-selector" @click="selectLocation">
						<text class="select-text">选择</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.companyLocation" 
						placeholder="请输入内容"
						@blur="validateCompanyLocation"
					/>
					<text class="error-text" v-if="errors.companyLocation">{{ errors.companyLocation }}</text>
				</view>

				<!-- 公司详细地址 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text class="label-text">公司详细地址</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.companyAddress" 
						placeholder="请输入内容"
						@blur="validateCompanyAddress"
					/>
					<text class="error-text" v-if="errors.companyAddress">{{ errors.companyAddress }}</text>
				</view>

				<!-- 员工人数 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text class="label-text">员工人数</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.employeeCount" 
						placeholder="请输入内容"
						type="number"
						@blur="validateEmployeeCount"
					/>
					<text class="error-text" v-if="errors.employeeCount">{{ errors.employeeCount }}</text>
				</view>

				<!-- 公司电话 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text class="label-text">公司电话</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.companyPhone" 
						placeholder="请输入内容"
						type="number"
						@blur="validateCompanyPhone"
					/>
					<text class="error-text" v-if="errors.companyPhone">{{ errors.companyPhone }}</text>
				</view>

				<!-- 注册资金 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text class="label-text">注册资金</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.registeredCapital" 
						placeholder="请输入内容"
						type="number"
						@blur="validateRegisteredCapital"
					/>
					<text class="error-text" v-if="errors.registeredCapital">{{ errors.registeredCapital }}</text>
				</view>

				<!-- 联系人姓名 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text class="label-text">联系人姓名</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.contactName" 
						placeholder="请输入内容"
						@blur="validateContactName"
					/>
					<text class="error-text" v-if="errors.contactName">{{ errors.contactName }}</text>
				</view>

				<!-- 联系人电话 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text class="label-text">联系人电话</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.contactPhone" 
						placeholder="请输入内容"
						type="number"
						@blur="validateContactPhone"
					/>
					<text class="error-text" v-if="errors.contactPhone">{{ errors.contactPhone }}</text>
				</view>

				<!-- 电子邮箱 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text class="label-text">电子邮箱</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.email" 
						placeholder="请输入内容"
						type="email"
						@blur="validateEmail"
					/>
					<text class="error-text" v-if="errors.email">{{ errors.email }}</text>
				</view>
			</view>
		</view>

		<!-- 营业执照信息 -->
		<view class="form-section">
			<view class="section-title">
				<text class="title-text">营业执照信息</text>
			</view>
			
			<view class="form-content">
				<!-- 营业执照号 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text class="label-text">营业执照号</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.licenseNumber" 
						placeholder="请输入内容"
						@blur="validateLicenseNumber"
					/>
					<text class="error-text" v-if="errors.licenseNumber">{{ errors.licenseNumber }}</text>
				</view>

				<!-- 法定经营范围 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text class="label-text">法定经营范围</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.businessScope" 
						placeholder="请输入内容"
						@blur="validateBusinessScope"
					/>
					<text class="error-text" v-if="errors.businessScope">{{ errors.businessScope }}</text>
				</view>

				<!-- 营业执照电子版 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text class="label-text">营业执照电子版</text>
					</view>
					<view class="upload-box" @click="selectImage">
						<view v-if="!formData.licenseImage" class="upload-placeholder">
							<text class="upload-icon">+</text>
							<text class="upload-text">选择图片</text>
						</view>
						<image v-else class="uploaded-image" :src="formData.licenseImage" mode="aspectFit" />
					</view>
					<text class="upload-tip">请压缩图片在2M以内,确保文字清晰以免上传或审核失败</text>
					<text class="error-text" v-if="errors.licenseImage">{{ errors.licenseImage }}</text>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-section">
			<button class="submit-btn" @click="submitForm" :disabled="!isFormValid">
				<text class="btn-text">提交信息</text>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					companyName: '',
					companyLocation: '',
					companyAddress: '',
					employeeCount: '',
					companyPhone: '',
					registeredCapital: '',
					contactName: '',
					contactPhone: '',
					email: '',
					licenseNumber: '',
					businessScope: '',
					licenseImage: ''
				},
				errors: {},
				isFormValid: false
			}
		},
		onLoad() {
			// 页面加载时获取数据
			this.getFormData()
		},
		methods: {
			// 获取表单数据 - 后续对接接口
			getFormData() {
				// TODO: 调用后端接口获取已保存的表单数据
				// uni.request({
				// 	url: '/api/shop/registration/form',
				// 	method: 'GET',
				// 	success: (res) => {
				// 		if (res.data) {
				// 			this.formData = { ...this.formData, ...res.data }
				// 		}
				// 	}
				// })
				console.log('获取表单数据')
			},

			// 选择地区
			selectLocation() {
				// TODO: 调用地区选择器
				uni.showToast({
					title: '选择地区功能',
					icon: 'none'
				})
			},

			// 选择图片
			selectImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0]
						// 检查文件大小
						uni.getFileInfo({
							filePath: tempFilePath,
							success: (fileInfo) => {
								if (fileInfo.size > 2 * 1024 * 1024) { // 2MB
									uni.showToast({
										title: '图片大小不能超过2M',
										icon: 'none'
									})
									return
								}
								this.formData.licenseImage = tempFilePath
								this.validateLicenseImage()
							}
						})
					}
				})
			},

			// 验证公司名称
			validateCompanyName() {
				if (!this.formData.companyName.trim()) {
					this.errors.companyName = '请输入公司名称'
				} else if (this.formData.companyName.length < 2) {
					this.errors.companyName = '公司名称至少2个字符'
				} else {
					delete this.errors.companyName
				}
				this.checkFormValid()
			},

			// 验证公司所在地
			validateCompanyLocation() {
				if (!this.formData.companyLocation.trim()) {
					this.errors.companyLocation = '请输入公司所在地'
				} else {
					delete this.errors.companyLocation
				}
				this.checkFormValid()
			},

			// 验证公司详细地址
			validateCompanyAddress() {
				if (!this.formData.companyAddress.trim()) {
					this.errors.companyAddress = '请输入公司详细地址'
				} else if (this.formData.companyAddress.length < 5) {
					this.errors.companyAddress = '详细地址至少5个字符'
				} else {
					delete this.errors.companyAddress
				}
				this.checkFormValid()
			},

			// 验证员工人数
			validateEmployeeCount() {
				if (!this.formData.employeeCount) {
					this.errors.employeeCount = '请输入员工人数'
				} else if (isNaN(this.formData.employeeCount) || this.formData.employeeCount <= 0) {
					this.errors.employeeCount = '请输入有效的员工人数'
				} else {
					delete this.errors.employeeCount
				}
				this.checkFormValid()
			},

			// 验证公司电话
			validateCompanyPhone() {
				if (!this.formData.companyPhone) {
					this.errors.companyPhone = '请输入公司电话'
				} else if (!/^1[3-9]\d{9}$/.test(this.formData.companyPhone)) {
					this.errors.companyPhone = '请输入有效的手机号码'
				} else {
					delete this.errors.companyPhone
				}
				this.checkFormValid()
			},

			// 验证注册资金
			validateRegisteredCapital() {
				if (!this.formData.registeredCapital) {
					this.errors.registeredCapital = '请输入注册资金'
				} else if (isNaN(this.formData.registeredCapital) || this.formData.registeredCapital <= 0) {
					this.errors.registeredCapital = '请输入有效的注册资金'
				} else {
					delete this.errors.registeredCapital
				}
				this.checkFormValid()
			},

			// 验证联系人姓名
			validateContactName() {
				if (!this.formData.contactName.trim()) {
					this.errors.contactName = '请输入联系人姓名'
				} else if (this.formData.contactName.length < 2) {
					this.errors.contactName = '联系人姓名至少2个字符'
				} else {
					delete this.errors.contactName
				}
				this.checkFormValid()
			},

			// 验证联系人电话
			validateContactPhone() {
				if (!this.formData.contactPhone) {
					this.errors.contactPhone = '请输入联系人电话'
				} else if (!/^1[3-9]\d{9}$/.test(this.formData.contactPhone)) {
					this.errors.contactPhone = '请输入有效的手机号码'
				} else {
					delete this.errors.contactPhone
				}
				this.checkFormValid()
			},

			// 验证邮箱
			validateEmail() {
				if (!this.formData.email) {
					this.errors.email = '请输入电子邮箱'
				} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.formData.email)) {
					this.errors.email = '请输入有效的邮箱地址'
				} else {
					delete this.errors.email
				}
				this.checkFormValid()
			},

			// 验证营业执照号
			validateLicenseNumber() {
				if (!this.formData.licenseNumber.trim()) {
					this.errors.licenseNumber = '请输入营业执照号'
				} else if (this.formData.licenseNumber.length < 10) {
					this.errors.licenseNumber = '营业执照号至少10个字符'
				} else {
					delete this.errors.licenseNumber
				}
				this.checkFormValid()
			},

			// 验证经营范围
			validateBusinessScope() {
				if (!this.formData.businessScope.trim()) {
					this.errors.businessScope = '请输入法定经营范围'
				} else if (this.formData.businessScope.length < 5) {
					this.errors.businessScope = '经营范围至少5个字符'
				} else {
					delete this.errors.businessScope
				}
				this.checkFormValid()
			},

			// 验证营业执照图片
			validateLicenseImage() {
				if (!this.formData.licenseImage) {
					this.errors.licenseImage = '请上传营业执照电子版'
				} else {
					delete this.errors.licenseImage
				}
				this.checkFormValid()
			},

			// 检查表单是否有效
			checkFormValid() {
				const requiredFields = [
					'companyName', 'companyLocation', 'companyAddress', 'employeeCount',
					'companyPhone', 'registeredCapital', 'contactName', 'contactPhone',
					'email', 'licenseNumber', 'businessScope', 'licenseImage'
				]
				
				this.isFormValid = requiredFields.every(field => {
					return this.formData[field] && !this.errors[field]
				})
			},

			// 提交表单
			submitForm() {
				// 验证所有字段
				// this.validateCompanyName()
				// this.validateCompanyLocation()
				// this.validateCompanyAddress()
				// this.validateEmployeeCount()
				// this.validateCompanyPhone()
				// this.validateRegisteredCapital()
				// this.validateContactName()
				// this.validateContactPhone()
				// this.validateEmail()
				// this.validateLicenseNumber()
				// this.validateBusinessScope()
				// this.validateLicenseImage()

				// if (!this.isFormValid) {
				// 	uni.showToast({
				// 		title: '请完善所有必填信息',
				// 		icon: 'none'
				// 	})
				// 	return
				// }

				// TODO: 调用后端接口提交表单数据
				// uni.request({
				// 	url: '/api/shop/registration/submit',
				// 	method: 'POST',
				// 	data: this.formData,
				// 	success: (res) => {
				// 		if (res.data.success) {
				// 			uni.showToast({
				// 				title: '提交成功',
				// 				icon: 'success'
				// 			})
				// 			// 跳转回dianpuruzhu页面并传递状态
				// 			setTimeout(() => {
				// 				uni.navigateBack({
				// 					delta: 1
				// 				})
				// 				// 通过全局状态传递步骤状态
				// 				getApp().globalData.stepStatus = 'submitted'
				// 			}, 1500)
				// 		}
				// 	},
				// 	fail: (err) => {
				// 		uni.showToast({
				// 			title: '提交失败，请重试',
				// 			icon: 'none'
				// 		})
				// 	}
				// })

				console.log('提交表单数据:', this.formData)
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
				
				// 跳转回dianpuruzhu页面并传递状态
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
					// 通过全局状态传递步骤状态
					getApp().globalData.stepStatus = 'submitted'
				}, 1500)
			}
		}
	}
</script>

<style scoped>
	.ruzu-info-container {
		background-color: #fff;
		min-height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* 表单区域 */
	.form-section {
		margin-bottom: 40rpx;
	}

	.section-title {
		padding: 30rpx 40rpx 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.title-text {
		font-size: 36rpx;
		font-weight: 700;
		color: #ff6b6b;
	}

	.form-content {
		padding: 20rpx 40rpx;
	}

	/* 表单项 */
	.form-item {
		margin-bottom: 30rpx;
	}

	.form-label {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.required {
		color: #ff6b6b;
		font-size: 28rpx;
		margin-right: 8rpx;
	}

	.label-text {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.form-input {
		width: 100%;
		height: 80rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
		border: 1rpx solid #e8e8e8;
		transition: all 0.3s ease;
	}

	.form-input:focus {
		border-color: #ff6b6b;
		background-color: #fff;
	}

	/* 地区选择器 */
	.location-selector {
		width: 100%;
		height: 80rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		border: 1rpx solid #e8e8e8;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 15rpx;
		transition: all 0.3s ease;
	}

	.location-selector:active {
		background-color: #f0f0f0;
	}

	.select-text {
		font-size: 28rpx;
		color: #666;
	}

	/* 错误提示 */
	.error-text {
		font-size: 24rpx;
		color: #ff6b6b;
		margin-top: 8rpx;
		display: block;
	}

	/* 上传区域 */
	.upload-box {
		width: 200rpx;
		height: 200rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		border: 1rpx solid #e8e8e8;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.upload-box:active {
		background-color: #f0f0f0;
	}

	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
	}

	.upload-icon {
		font-size: 60rpx;
		color: #999;
		font-weight: bold;
	}

	.upload-text {
		font-size: 24rpx;
		color: #999;
	}

	.uploaded-image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.upload-tip {
		font-size: 22rpx;
		color: #999;
		margin-top: 10rpx;
		display: block;
		line-height: 1.4;
	}

	/* 提交按钮 */
	.submit-section {
		padding: 40rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		border-top: 1rpx solid #eee;
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		background-color: #ff6b6b;
		color: #fff;
		border: none;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: 600;
		transition: all 0.3s ease;
	}

	.submit-btn:active {
		transform: scale(0.98);
	}

	.submit-btn[disabled] {
		background-color: #ccc;
		color: #999;
	}

	.btn-text {
		display: block;
		text-align: center;
	}

	/* 响应式适配 */
	@media screen and (max-width: 750rpx) {
		.form-content {
			padding: 15rpx 30rpx;
		}
		
		.section-title {
			padding: 25rpx 30rpx 15rpx;
		}
		
		.title-text {
			font-size: 32rpx;
		}
		
		.form-input {
			height: 70rpx;
			font-size: 26rpx;
		}
		
		.location-selector {
			height: 70rpx;
		}
		
		.select-text {
			font-size: 26rpx;
		}
		
		.upload-box {
			width: 180rpx;
			height: 180rpx;
		}
	}

	@media screen and (max-width: 600rpx) {
		.form-content {
			padding: 10rpx 25rpx;
		}
		
		.section-title {
			padding: 20rpx 25rpx 10rpx;
		}
		
		.title-text {
			font-size: 30rpx;
		}
		
		.form-input {
			height: 65rpx;
			font-size: 24rpx;
		}
		
		.location-selector {
			height: 65rpx;
		}
		
		.select-text {
			font-size: 24rpx;
		}
		
		.upload-box {
			width: 160rpx;
			height: 160rpx;
		}
	}
</style>
